<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/11/1
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/18
  Time: 12:11
  To change this template use File | Settings | FileTemplates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户中心</title>
    <jsp:include page="inc/inc.jsp"></jsp:include>
</head>

<body>


    <header id="site-header" class="fixed-top">
        <section class="w3l-header-4">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <h1><a class="navbar-brand" href="${path}/user/index">
                        <span>跑腿平台</span>
                    </a></h1>
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                            data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                            aria-label="Toggle navigation">
                        <span class="fa icon-expand fa-bars"></span>
                        <span class="fa icon-close fa-times"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav mx-lg-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="${path}/user/index">首页 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${path}/user/wallet">钱包</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                            </li>
                            <li class="nav-item" >
                                <a class="nav-link" href="${path}/user/reviewList">我的评价</a>
                            </li>
                            <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>

                        </ul>
                        <ul class="navbar-nav search-right mt-lg-0 mt-2">

                             <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                    class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                                    class="fa fa-phone mr-3" aria-hidden="true"></span> ${sessionScope.user.phone_number}</a>
                            </li>
                        </ul>

                        <!-- search popup -->
                        <div id="search" class="pop-overlay">
                            <div class="popup">
                                <form action="#" method="GET" class="d-sm-flex">
                                    <input type="search" placeholder="Search.." name="search" required="required"
                                           autofocus>
                                    <button type="submit">Search</button>
                                    <a class="close" href="#url">&times;</a>
                                </form>
                            </div>
                        </div>
                        <!-- /search popup -->
                    </div>
                    <!-- toggle switch for light and dark theme -->
                    <div class="mobile-position">
                        <nav class="navigation">
                            <div class="theme-switch-wrapper">
                                <label class="theme-switch" for="checkbox">
                                    <input type="checkbox" id="checkbox">
                                    <div class="mode-container">
                                        <i class="gg-sun"></i>
                                        <i class="gg-moon"></i>
                                    </div>
                                </label>
                            </div>
                        </nav>
                    </div>
                </nav>
            </div>
        </section>
    </header>
    <section id="home" class="w3l-banner py-5">
        <div class="container py-lg-5 py-md-4">
            <div class="row align-items-center">
                <div class="col-lg-6 col-sm-12 mt-lg-0 mt-4">
                    <span class="subhny-title mb-2">遥遥领先</span>
                    <h3 class="mb-4">跑腿平台</h3>
                    <p>这是一个跑腿平台</p>
                    <div class="mt-sm-5 mt-4">
                        <a class="btn btn-primary btn-style" href="/user/createTask"> 发布任务 <span
                                class="fa fa-chevron-right"></span></a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-8 col-sm-10 mt-lg-0 mt-5">
                    <div class="img-effect text-lg-center">
                        <img src="/static/user/images/pic1.png" alt="banner" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="w3l-stats py-lg-5 py-4" id="stats">
        <div class="container py-md-5 py-4">
            <span class="subhny-title mb-2 text-center">遥遥领先.</span>
            <h3 class="hny-title mb-md-4 mb-2 text-center">
                了解一下我们的网页</h3>
            <div class="row stats-con">
                <div class="col-lg-4 col-md-6 stats_info counter_grid">

                    <p class="counter">100</p>
                    <h4>百分之百为您尽心服务
                    </h4>
                </div>
                <div class="col-lg-4 col-md-6 stats_info counter_grid1">
                    <p class="counter">400+</p>
                    <h4>支持全国400+城市</h4>
                </div>
                <div class="col-lg-4 col-md-6 stats_info counter_grid mt-md-0 mt-5">

                    <p class="counter">${requestScope.reviewsList.size()}</p>
                    <h4>收获来自不同客户的${requestScope.reviewsList.size()}条好评</h4>
                </div>

            </div>
        </div>
    </section>

    <section class="w3l-features py-5" id="work">
        <div class="call-w3 py-lg-5 py-md-4">
            <div class="container">
                <div class="row main-cont-wthree-2">
                    <div class="col-lg-5 feature-grid-left pr-lg-5">
                        <span class="subhny-title mb-2">遥遥领先.</span>
                        <h3 class="hny-title mb-md-4 mb-2">人在家中坐
                            服务马上来</h3>
                        <p class="text-para">都给我用！
                        </p>
                    </div>
                    <div class="col-lg-7 feature-grid-right mt-lg-0 mt-5">
                        <div class="call-grids-w3 d-grid">
                            <div class="grids-1 box-wrap">
                                <div class="icon">
                                    <span class="fa fa-clock-o" aria-hidden="true"></span>
                                </div>
                                <h4><a href="#feature" class="title-head">就是快</a></h4>
                            </div>
                            <div class="grids-1 box-wrap">
                                <div class="icon">
                                    <span class="fa fa-mobile" aria-hidden="true"></span>
                                </div>
                                <h4><a href="#feature" class="title-head">还没有APP</a></h4>
                            </div>
                            <div class="grids-1 box-wrap">
                                <div class="icon">
                                    <span class="fa fa-map-marker" aria-hidden="true"></span>
                                </div>
                                <h4><a href="#feature" class="title-head">基于百度地图</a></h4>
                            </div>
                            <div class="grids-1 box-wrap">
                                <div class="icon">
                                    <span class="fa fa-user-circle-o" aria-hidden="true"></span>
                                </div>
                                <h4><a href="#feature" class="title-head">没有人用</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="w3l-content-with-photo-4">
        <!-- /content-grids-->
        <div class="content-photo-info py-5">
            <div class="container py-md-5">
                <!-- /row-->
                <div class="content-photo-grids row">

                    <div class="photo-6-inf-right col-lg-7 text-left pr-lg-5 mb-lg-0 mb-5">
                        <span class="subhny-title mb-2">遥遥领先.</span>
                        <h3 class="hny-title mb-md-4 mb-2">
                            获取更多关于我们的应用程序---暂时没有</h3>
                        <p class="mt-3 pr-lg-5">或许未来会有APP.</p>
                        <div class="servehny-1">
                            <div class="ser-sub">

                                <a href="#link" class="ser1"><span class="fa fa-check"></span> 任何时间
                                </a>
                                <a href="#link" class="ser1"><span class="fa fa-check"></span> 任何地点
                                </a>
                                <a href="#link" class="ser1"><span class="fa fa-check"></span> 为您服务</a>
                            </div>

                        </div>
                        <div class="read-buttons mt-lg-5">

                            <a class="btn btn-outline-primary btn-style mr-2" href="#"><span
                                    class="fa fa-play-circle-o mr-2"></span> <span class="prim_text">(没有上架)</span></a>
                            <a class="btn btn-primary btn-style" href="#"><span class="fa fa-apple mr-2"></span> <span
                                    class="prim_text">(更没上架)</span></a>

                        </div>
                    </div>
                    <div class="photo-6-inf-left col-lg-5 pr-lg-4 text-lg-right text-center">
                        <a href="#"><img src="/static/user/images/pic4.png" class="img-fluid" alt=""></a>
                    </div>
                </div>
                <!-- //row-->
            </div>
        </div>
    </section>
    <section class="w3l-clients-1" id="testimonials">
        <!-- /grids -->
        <div class="cusrtomer-layout py-5">
            <div class="container py-md-4">
                <div class="heading align-self text-center">
                    <span class="subhny-title mb-2">我们的服务遥遥领先</span>
                    <h3 class="hny-title mb-md-4 mb-2">
                        顾客的好评</h3>
                </div>
                <!-- /grids -->
                <div class="testimonial-row">
                    <div id="owl-demo1" class="owl-two owl-carousel owl-theme mb-md-3 mb-sm-5 mb-4">
                        <c:forEach items="${requestScope.reviewsList}" var="review">
                            <div class="item">
                                <div class="testimonial-content">
                                    <div class="testimonial">
                                        <div class="test-img">
                                            <img src="/static/user/images/team1.jpg" class="img-fluid" alt="client-img">
                                        </div>
                                        <blockquote>
                                            <q>${review.comment}</q>
                                        </blockquote>
                                        <div class="testi-des">
                                            <div class="peopl align-self">
                                                <h3>${review.user.username}</h3>
                                                <p class="indentity">顾客 </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>

                    </div>
                </div>

            </div>
        </div>

        <!-- //grids -->
    </section>
    <jsp:include page="inc/footer.jsp"></jsp:include>

<script>
    function logOut() {
        window.location.href = "${path}/user/logOut";
    }

    function toggleCollapse(titleElement) {
        const module = titleElement.parentElement;
        const optionItems = module.querySelectorAll('.option-item');
        const length = optionItems.length;
        const isCollapsed = module.classList.contains('collapsed');
        if (isCollapsed) {
            module.classList.remove('collapsed');
            for (let i = 0; i < length; i++) {
                const item = optionItems[i];
                item.style.display = 'block';
            }
        } else {
            module.classList.add('collapsed');
            for (let i = 0; i < length; i++) {
                const item = optionItems[i];
                item.style.display = 'none';
            }
        }
    }
</script>

<script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("movetop").style.display = "block";
        } else {
            document.getElementById("movetop").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<!-- /move top -->


<script src="/static/user/js/jquery-3.3.1.min.js"></script> <!-- Common jquery plugin -->

<script src="/static/user/js/theme-change.js"></script><!-- theme switch js (light and dark)-->
<!-- responsive tabs -->
<script src="/static/user/js/jquery-1.9.1.min.js"></script>

<script src="/static/user/js/easyResponsiveTabs.js"></script>

<!--Plug-in Initialisation-->
<script type="text/javascript">
    $(document).ready(function () {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>
<!-- //counter-->
<script src="/static/user/js/owl.carousel.js"></script><!-- owl carousel -->
<!-- script for tesimonials carousel slider -->
<script>
    $(document).ready(function () {
        $("#owl-demo1").owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: false
                },
                1000: {
                    items: 1,
                    nav: false,
                    loop: false
                }
            }
        })
    })
</script>
<!-- //script for tesimonials carousel slider -->
<!--/MENU-JS-->
<script>
    $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 80) {
            $("#site-header").addClass("nav-fixed");
        } else {
            $("#site-header").removeClass("nav-fixed");
        }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
        if ($(window).width() > 991) {
            $("header").removeClass("active");
        }
        $(window).on("resize", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
        });
    });
</script>
<!--//MENU-JS-->

<!-- disable body scroll which navbar is in active -->
<script>
    $(function () {
        $('.navbar-toggler').click(function () {
            $('body').toggleClass('noscroll');
        })
    });
</script>
<!-- //disable body scroll which navbar is in active -->

<!--bootstrap-->
<script src="/static/user/js/bootstrap.min.js"></script>
<!-- //bootstrap-->
</body>

</html>